<template>
  <el-dialog
    top="30px"
    width="80%"
    append-to-body
    class="dialog-sm"
    title="涉及银行"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    visible: Boolean,
    batchId: {
      require: true,
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      params: {},
      tableName: 'datum_one_county_industry',
      tableData: [],
      tableColumns: [
        { attrs: { label: '银行名称', prop: 'bank_name', align: 'center' } },
        { attrs: { label: '项目数量', prop: 'p', align: 'center' } },
      ],
    }
  },
  computed: {},
  watch: {
    visible(val) {
      if (val) {
        this.getData()
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    async getData() {
      if (!this.batchId) {
        return
      }

      this.params = {
        'review_approval_batch_id.eq': this.batchId,
        groupFields: 'bank_id',
        fields: ['bank_id', 'bank_name'],
        groupFunc: 'count(datum_one_county_industry.bank_id)',
      }

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params)
      )
      this.loading = false

      this.tableData = (res && res.data) || []
    },
  },
}
</script>

<style lang="scss" scoped></style>
